<template>
  <div class="post-form-container">
    <h2>{{ isEdit ? '编辑文章' : '创建文章' }}</h2>
    <form @submit.prevent="submitPost">
      <div>
        <label for="title">标题:</label>
        <input type="text" id="title" v-model="post.title" required />
      </div>
      <div>
        <label for="content">内容:</label>
        <textarea id="content" v-model="post.content" required></textarea>
      </div>
      <button type="submit">{{ isEdit ? '更新' : '创建' }}文章</button>
      <button type="button" @click="cancel">取消</button>
    </form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const router = useRouter();
const isEdit = ref(false); // 是否为编辑模式
const post = ref({ title: '', content: '' }); // 存储文章数据

// 获取文章详情（编辑模式）
const fetchPost = async (id) => {
  try {
    const response = await axios.get(`http://localhost:3000/api/posts/${id}`); // 替换为实际 API
    post.value = response.data;
  } catch (error) {
    console.error('获取文章失败:', error);
  }
};

// 提交文章
const submitPost = async () => {
  try {
    if (isEdit.value) {
      // 更新文章
      await axios.put(`http://localhost:3000/api/posts/${route.params.id}`, post.value); // 替换为实际 API
    } else {
      // 创建新文章
      await axios.post('http://localhost:3000/api/posts', post.value); // 替换为实际 API
    }
    router.push('/home'); // 提交后重定向到首页
  } catch (error) {
    console.error('提交文章失败:', error);
  }
};

// 取消操作
const cancel = () => {
  router.push('/profile'); // 取消后重定向到首页
};

// 在组件挂载时获取文章（如果是编辑模式）
onMounted(() => {
  if (route.params.id) {
    isEdit.value = true; // 如果有 ID，则为编辑模式
    fetchPost(route.params.id); // 获取文章详情
  }
});
</script>

<style scoped>
.post-form-container {
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.post-form-container h2 {
  margin-bottom: 20px;
}

.post-form-container form {
  display: flex;
  flex-direction: column;
}

.post-form-container label {
  margin-bottom: 5px;
}

.post-form-container input,
.post-form-container textarea {
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.post-form-container button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.post-form-container button:hover {
  background-color: #0056b3;
}
</style> 